<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="apple-touch-icon" type="image/png"
        href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
    <meta name="apple-mobile-web-app-title" content="CodePen">

    <link rel="shortcut icon" type="image/x-icon"
        href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

    <link rel="mask-icon" type=""
        href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
        color="#111" />


    <title>CodePen - imitation_zhima_credit</title>




    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        canvas {
            border: 1px solid #eee;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: -webkit-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
            background: -ms-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
            background: -moz-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
            background: linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
        }
    </style>

    <script>
        window.console = window.console || function (t) { };
    </script>



    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>


</head>

<body translate="no">
    <canvas id="canvas" width="400" height="700" data-score='724'></canvas>
    <script
        src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>


    <script id="rendered-js">
        window.onload = function () {
            var canvas = document.getElementById('canvas'),
                ctx = canvas.getContext('2d'),
                cWidth = canvas.width,
                cHeight = canvas.height,
                score = canvas.attributes['data-score'].value,
                stage = ['较差', '中等', '良好', '优秀', '极好'],
                radius = 150,
                deg0 = Math.PI / 9,
                deg1 = Math.PI * 11 / 45;

            if (score < 400 || score > 900) {
                alert('信用分数区间：400~900');
            } else {
                var dot = new Dot(),
                    dotSpeed = 0.03,
                    textSpeed = Math.round(dotSpeed * 100 / deg1),
                    angle = 0,
                    credit = 400;

                (function drawFrame() {

                    ctx.save();
                    ctx.clearRect(0, 0, cWidth, cHeight);
                    ctx.translate(cWidth / 2, cHeight / 2);
                    ctx.rotate(8 * deg0);

                    dot.x = radius * Math.cos(angle);
                    dot.y = radius * Math.sin(angle);

                    var aim = (score - 400) * deg1 / 100;
                    if (angle < aim) {
                        angle += dotSpeed;
                    }
                    dot.draw(ctx);

                    if (credit < score - textSpeed) {
                        credit += textSpeed;
                    } else if (credit >= score - textSpeed && credit < score) {
                        credit += 1;
                    }
                    text(credit);

                    ctx.save();
                    ctx.beginPath();
                    ctx.lineWidth = 3;
                    ctx.strokeStyle = 'rgba(255, 255, 255, .5)';
                    ctx.arc(0, 0, radius, 0, angle, false);
                    ctx.stroke();
                    ctx.restore();

                    window.requestAnimationFrame(drawFrame);

                    ctx.save(); //中间刻度层
                    ctx.beginPath();
                    ctx.strokeStyle = 'rgba(255, 255, 255, .2)';
                    ctx.lineWidth = 10;
                    ctx.arc(0, 0, 135, 0, 11 * deg0, false);
                    ctx.stroke();
                    ctx.restore();

                    ctx.save(); // 刻度线
                    for (var i = 0; i < 6; i++) {
                        ctx.beginPath();
                        ctx.lineWidth = 2;
                        ctx.strokeStyle = 'rgba(255, 255, 255, .3)';
                        ctx.moveTo(140, 0);
                        ctx.lineTo(130, 0);
                        ctx.stroke();
                        ctx.rotate(deg1);
                    }
                    ctx.restore();

                    ctx.save(); // 细分刻度线
                    for (i = 0; i < 25; i++) {
                        if (i % 5 !== 0) {
                            ctx.beginPath();
                            ctx.lineWidth = 2;
                            ctx.strokeStyle = 'rgba(255, 255, 255, .1)';
                            ctx.moveTo(140, 0);
                            ctx.lineTo(133, 0);
                            ctx.stroke();
                        }
                        ctx.rotate(deg1 / 5);
                    }
                    ctx.restore();

                    ctx.save(); //信用分数
                    ctx.rotate(Math.PI / 2);
                    for (i = 0; i < 6; i++) {
                        ctx.fillStyle = 'rgba(255, 255, 255, .4)';
                        ctx.font = '10px Microsoft yahei';
                        ctx.textAlign = 'center';
                        ctx.fillText(400 + 100 * i, 0, -115);
                        ctx.rotate(deg1);
                    }
                    ctx.restore();

                    ctx.save(); //分数段
                    ctx.rotate(Math.PI / 2 + deg0);
                    for (i = 0; i < 5; i++) {
                        ctx.fillStyle = 'rgba(255, 255, 255, .4)';
                        ctx.font = '10px Microsoft yahei';
                        ctx.textAlign = 'center';
                        ctx.fillText(stage[i], 5, -115);
                        ctx.rotate(deg1);
                    }
                    ctx.restore();

                    ctx.save(); //信用阶段及评估时间文字
                    ctx.rotate(10 * deg0);
                    ctx.fillStyle = '#fff';
                    ctx.font = '28px Microsoft yahei';
                    ctx.textAlign = 'center';
                    if (score < 500) {
                        ctx.fillText('信用较差', 0, 40);
                    } else if (score < 600 && score >= 500) {
                        ctx.fillText('信用中等', 0, 40);
                    } else if (score < 700 && score >= 600) {
                        ctx.fillText('信用良好', 0, 40);
                    } else if (score < 800 && score >= 700) {
                        ctx.fillText('信用优秀', 0, 40);
                    } else if (score <= 900 && score >= 800) {
                        ctx.fillText('信用极好', 0, 40);
                    }

                    ctx.fillStyle = '#80cbfa';
                    ctx.font = '14px Microsoft yahei';
                    ctx.fillText('评估时间：2016.11.06', 0, 60);

                    ctx.fillStyle = '#7ec5f9';
                    ctx.font = '14px Microsoft yahei';
                    ctx.fillText('BETA', 0, -60);
                    ctx.restore();


                    // ctx.save(); //最外层轨道
                    ctx.beginPath();
                    ctx.strokeStyle = 'rgba(255, 255, 255, .4)';
                    ctx.lineWidth = 3;
                    ctx.arc(0, 0, radius, 0, 11 * deg0, false);
                    ctx.stroke();
                    ctx.restore();

                })();
            }

            function Dot() {
                this.x = 0;
                this.y = 0;
                this.draw = function (ctx) {
                    ctx.save();
                    ctx.beginPath();
                    ctx.fillStyle = 'rgba(255, 255, 255, .7)';
                    ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
                    ctx.fill();
                    ctx.restore();
                };
            }

            function text(process) {
                ctx.save();
                ctx.rotate(10 * deg0);
                ctx.fillStyle = '#000';
                ctx.font = '80px Microsoft yahei';
                ctx.textAlign = 'center';
                ctx.textBaseLine = 'top';
                ctx.fillText(process, 0, 10);
                ctx.restore();
            }
        };
//# sourceURL=pen.js
    </script>



</body>

</html>